import { useState } from 'react';

import type { SizeInfo } from 'ym-design';
import { YmResizeObserver } from 'ym-design';

function YmResizeObserverPage() {
  const [sizeInfo, setSizeInfo] = useState<SizeInfo>();

  const handleResize = (sizeInfo: SizeInfo, target: HTMLElement) => {
    // console.log('--sizeInfo--target---:', sizeInfo, target);
    setSizeInfo(sizeInfo);
  };

  return (
    <div
      className="obeserver_page_container"
      style={{ width: '100%', height: '500px' }}
    >
      <YmResizeObserver
        isFullParent
        onResize={handleResize}
        rootStyle={{ border: '#f66e2c solid 1px' }}
      >
        <div>
          <p>我是被嵌套的dom元素</p>
          <p>width:{sizeInfo?.width}</p>
          <p>height:{sizeInfo?.height}</p>
          <p>offsetWidth:{sizeInfo?.offsetWidth}</p>
          <p>offsetHeight:{sizeInfo?.offsetHeight}</p>
        </div>
      </YmResizeObserver>
    </div>
  );
}

export default YmResizeObserverPage;
